import React, { useEffect, useRef, useState } from "react";
import styles from "./feiyonglv-view.module.scss";
import XxtvCard from "../card/xxtv-card";

/**
 * 
 * @param {} param0 
 * @returns
 * @description 费用率模块
 */

let fytime;
const XxFeiyonglvComponent = ({
    syFeeRate = 0.00, // 商业险费用率
    syNewFeeRate = 0.00, // 新保费用率（商业险）
    syRenewalFeeRate = 0.00, // 续保费用率（商业险）
    syReinsurFeeRate = 0.00, // 转保费用率（商业险）
    jqFeeRate = 0.00, // 交强险费用率
    jqNewFeeRate = 0.00, // 新保费用率（交强险）
    jqRenewalFeeRate = 0.00, // 续保费用率（交强险）
    jqReinsurFeeRate = 0.00, // 转保费用率（交强险）
}) => {
    const [active, setActive] = useState(2);
    const onChange = (key) => {
        setActive(key);
    }


    const BtnEl = () => {
        return (
            <>
                <div className={styles.btnBox}>
                    <div onClick={() => onChange(1)} className={active === 1 ? "btn active" : "btn"}>商业险</div>
                    <div onClick={() => onChange(2)} className={active === 2 ? "btn active" : "btn"}>交强险</div>
                </div>
            </>
        )
    }



    // 定时处理
    const ref = useRef();


    return (
        <>
            <XxtvCard
                title="费用率（%）"
                ActionElement={<BtnEl />}
            >

                <div style={{ width: '100%', height: '100%' }} ref={ref}>
                    <div className={active === 1 ? styles.center + " animate_scale-show" : styles.center + ' animate_scale-hide'}
                    >
                        <div className="echart-box" >
                            <span className="value">{syFeeRate}</span>
                            <span className="label">商业险费用率</span>
                        </div>
                        <div className="text-box">
                            <div className="text-item">
                                <span className="icon color1"></span>
                                <span className="word">新保：{syNewFeeRate}</span>
                            </div>
                            <div className="text-item">
                                <span className="icon color2"></span>
                                <span className="word">续保：{syRenewalFeeRate}</span>
                            </div>
                            <div className="text-item">
                                <span className="icon color3"></span>
                                <span className="word">转保：{syReinsurFeeRate}</span>
                            </div>
                        </div>
                    </div>
                    <div
                        className={active === 2 ? styles.center + " animate_scale-show" : styles.center + ' animate_scale-hide'}
                    >
                        <div className="echart-box" >
                            <span className="value">{jqFeeRate}</span>
                            <span className="label">交强险费用率</span>
                        </div>
                        <div className="text-box">
                            <div className="text-item">
                                <span className="icon color1"></span>
                                <span className="word">新保：{jqNewFeeRate}</span>
                            </div>
                            <div className="text-item">
                                <span className="icon color2"></span>
                                <span className="word">续保：{jqRenewalFeeRate}</span>
                            </div>
                            <div className="text-item">
                                <span className="icon color3"></span>
                                <span className="word">转保：{jqReinsurFeeRate}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </XxtvCard>
        </>
    )
}












export default XxFeiyonglvComponent